<template>
  <div class="running-water">
    <div class="pie-box">
      <div class="top">
        <query-date
          ref="queryTime"
          :date1="date1"
          :nums="nums"
          :isfix="false"
          @queryTimeData="dataQuery"/>
        <change-select v-if="isShowSelect" :select-data="selectData" :isfix="false"/>
      </div>
      <total-count ref="totalDom" :obj-data="runningWaterObj"/>
      <div class="include">
        <common-list
          v-if="userTypeIsSixList"
          :data-source="waterListData"
          :is-show-icon="isShowIcon"
          :table-title ="tableTitle"
          @toDetailPage="toDetailPage"
          @toListPage="toListPage"/>
        <pie-map
          v-if="isShowPieDom"
          ref="pieDom"
          :obj="obj1"
          :formatter="formatter"
          :data-source="showDatas"
          :title="pieTitle"/>
        <pie-map
          v-if="isShowPieObj2"
          v-show="isShowPiePrivoceDom"
          ref="piePrivoceDom"
          :obj="obj2"
          :formatter="formatter"
          :data-source="provinceDataShow"
          :title="comparisonPieTitle"/>
        <common-list
          v-if="userTypeIsSix"
          :data-source="waterListData"
          :table-title="listTitle"
          :is-show-icon="isShowIcon"
          @closeList="closeList"
          @toDetailPage="toDetailPage"
          @toListPage="toListPage" />
        <!-- 排名 -->
        <bar-pic v-if="isShowUserType" ref="barDom" :obj="runningBar" :title="barTitle"/>
        <!-- 付款方式 -->
        <bar-pic ref="payBarDom" :obj="payBar"/>
        <!-- 趋势 -->
        <line-map ref="lineDom" :dom-obj="weekLine"/>
        <!-- 流水量 -->
        <pic-bar ref="vBarDom" :dom-obj="picVBar"/>
        <mask-loading
          v-show="isShowMask"
          :msg="msg"
          :num="num"
          :width="width"/>
      </div>
    </div>
    <list-detail :left-val="leftVal" :detail-data="detailData" :title="title" @closeDetail="closeDetail"/>
    <list-page :left-val="leftPageVal" :list-data="listData" :title="listTitle" @closeList="closeList" @toListDetail="toListDetail"/>
  </div>
</template>
<script>
import BarPic from '@/components/bar/bar'
import pieMap from '@/components/pie/pie'
import lineMap from '@/components/line/line'
import picBar from '@/components/bar/verticalBar'
import queryDate from '@/components/queryDate/queryDate'
import common from '@/assets/js/common.js'
import maskLoading from '@/components/mask/mask'
import totalCount from '@/components/TotalCount/TotalCount'
import CommonList from '@/components/CommonList/CommonList'
import ListDetail from '@/components/ListDetail/ListDetail'
import ListPage from '@/components/List/List'
import changeSelect from '@/components/changeSelect/changeSelect'
export default {
  components: {
    pieMap,
    lineMap,
    queryDate,
    picBar,
    maskLoading,
    totalCount,
    BarPic,
    CommonList,
    ListDetail,
    ListPage,
    changeSelect
  },
  data () {
    return {
      obj1: 'runningWater',
      obj2: 'provincePieDom',
      weekLine: 'weekLine',
      picVBar: 'picVBar',
      pieTitle: '',
      dayTitle: '',
      vBarTitle: '',
      unit: '',
      days: '',
      formatter: '',
      personMoney: '',
      totalMoney: '',
      manageTitle: '',
      areaName: '',
      userType: '',
      date1: '昨日',
      barUnit: '',
      nums: '',
      msg: '加载中,请稍后...',
      num: 1,
      isShowMask: false,
      width: '13%',
      fieldType: 'count',
      runningBar: 'runningBar',
      barTitle: '',
      payBar: 'payBar',
      payBarTitle: '',
      leftTitle: '',
      rightTitle: '',
      payBarDomTitle: '',
      // 总订单流水金额
      allAmountWater: '',
      // 总订单流水应收
      amountReceivable: '',
      // 昨日总订单流水上期数
      orderPriorPeriod: '',
      // 昨日总应收上期数
      receivedPriorPeriod: '',
      comparisonPieTitle: '',
      // 省区经理才显示第二个饼图
      isShowPiePrivoceDom: true,
      runningWaterObj: {},
      showDatas: [],
      provinceDataShow: [],
      waterListData: [],
      detailData: [],
      isShowIcon: true,
      leftVal: '100%',
      leftPageVal: '100%',
      listTitle: {},
      userTypeIsSix: false,
      userTypeIsSeven: true,
      userTypeIsSixList: false,
      isShowUserType: true,
      isShowPieDom: true,
      selectData: [
        {name: '往返', value: 0}
      ],
      isShowSelect: false,
      isShowPieObj2: true,
      listData: [],
      title: '订单详情'

    }
  },
  mounted () {
    // userType 为 6 代表线路、 7 代表司机、 5 代表运营商
    let getRole = JSON.parse(sessionStorage.getItem('getRole'))
    let areaName = getRole.areaName
    let userType = getRole.userType
    let areaNameDeal = areaName.split('-')
    let lastName = areaNameDeal[1] + '-' + areaNameDeal[0]
    this.selectData = [
      {name: '往返', value: 0},
      {name: areaName, value: 1},
      {name: lastName, value: 2}
    ]
    if (userType === 6) {
      this.userTypeIsSix = false
      this.isShowPieDom = false
      this.isShowPieObj2 = false
      this.isShowSelect = true
    } else if (userType === 7) {
      this.userTypeIsSeven = false
      this.isShowPieDom = false
      this.userTypeIsSix = true
      this.isShowSelect = true
      this.isShowUserType = false
    }
    // 判断是不是全国
    common.isUserType(this, '元')
    this.$nextTick(() => {
      common.homeRequest(1, null, null, this, 'getTurnover')
      this.init()
    })
    this.listTitle = {title: '昨日 ' + areaName + '（往返）订单流水', name: '订单号', value: '订单金额 （元）'}
  },
  methods: {
    // 去列表详情
    toListDetail (item) {
      console.log(item)
      common.toDetailRequest(this, item, 'getOrder', 5)
    },
    // 关闭列表
    closeList () {
      this.leftPageVal = '100%'
    },
    // 去列表页
    toListPage () {
      this.leftPageVal = '0%'
      let getHomeData = JSON.parse(sessionStorage.getItem('getHomeData'))
      this.listData = getHomeData.resultData.resultIndexListData
    },
    // 关闭详情
    closeDetail () {
      this.leftVal = '100%'
    },
    // 列表去详情
    toDetailPage (item) {
      common.toDetailRequest(this, item, 'getOrder', 5)
    },
    dataQuery (index) {
      let getTurnover = JSON.parse(sessionStorage.getItem('getHomeData'))
      let getRole = JSON.parse(sessionStorage.getItem('getRole'))
      common.clickDate(this, index, 'getTurnover')
      this.runningWaterData(getTurnover.resultData, this.pieTitle)
      common.dataQueryCommon(index, this, getTurnover.resultData, this.dayTitle, '元', getRole.areaName, this.pieTitle, this.fieldType, 'getTurnover'
      )
    },
    init () {
      let getRole = JSON.parse(sessionStorage.getItem('getRole'))
      this.vBarTitle = '近7天' + getRole.areaName + common.isLine() + '订单流水量'
      getRole.areaName = getRole.areaName
    },
    firstTimeInit (userType, that, type) {
      let getTurnover = JSON.parse(sessionStorage.getItem('getHomeData'))
      common.homeShowDate(getTurnover.resultData, userType, that, type)
    },
    commonInit (dataSource, date, userType, that, num) {
      let getRole = JSON.parse(sessionStorage.getItem('getRole'))
      console.log(getRole)
      this.allAmountWater = dataSource.navigationColumn.totalCount
      let changeName = ''
      if (getRole.userType === 1) {
        changeName = '占'
      } else {
        changeName = '对'
      }
      this.pieTitle = date + getRole.areaName + '订单流水' + changeName + '比'
      this.comparisonPieTitle = date + getRole.areaName + '订单流占比'
      this.runningWaterData(dataSource, this.pieTitle)
      this.componentsData('昨日')
      console.log(dataSource)
      if (num === 0) {
        common.isNull(dataSource, that, '近7天' + getRole.areaName + common.isLine() + '订单流水趋势', '元', userType, this.pieTitle, this.fieldType
        )
        this.vBarTitle = '近7天' + getRole.areaName + common.isLine() + '订单流水量'
      } else {
        this.componentsData(date)
        common.isNull(dataSource, that, date + getRole.areaName + common.isLine() + '订单流水趋势', '元', userType, this.pieTitle, this.fieldType)
        this.vBarTitle = date + getRole.areaName + common.isLine() + '订单流水量'
      }
      // that.$refs.queryTime.changeTitle(date + that.areaName + '运营流水数')
    },
    runningWaterData (data, title) {
    // userType为1代表是最高全限看全国
      let showDatas = []
      // 战区对比
      let dataSource = data.resultIndexGroupByRegion
      if (dataSource && dataSource.length > 0) {
        showDatas = common.hotPicPieData(dataSource, this, 'name', 'value')
      }
      // 省区经理饼图对比
      let provinceData = data.resultIndexGroupByArea
      let provinceDataShow = []
      if (provinceData.length > 0) {
        provinceDataShow = common.hotPicPieData(provinceData, this, 'name', 'value')
        this.isShowPiePrivoceDom = true
      } else {
        this.isShowPiePrivoceDom = false
      }
      this.showDatas = showDatas
      this.provinceDataShow = provinceDataShow
    },
    componentsData (date) {
      let getRole = JSON.parse(sessionStorage.getItem('getRole'))
      let getTurnover = JSON.parse(sessionStorage.getItem('getHomeData'))
      console.log(getTurnover)
      this.payBarDomTitle = date + getRole.areaName + common.isLine() + '订单流水付款方式'
      // 总数
      let totalData = getTurnover.resultData.navigationColumn
      this.allAmountWater = totalData.totalCount
      this.allAmountReceivable = totalData.receivableTotalCount
      this.amountWater = totalData.timeCount
      this.amountReceivable = totalData.receivableTimeCount
      // 订单流水环比
      this.orderPriorPeriod = totalData.ringRatioCount
      // 应收环比
      this.receivedPriorPeriod = totalData.receivableRingRatioCount

      this.leftTitle = date + getRole.areaName + '<br>总订单流水'
      this.allLeftTitle = getRole.areaName + '总订单流水'
      this.allRightTitle = getRole.areaName + '总订单应收'
      this.rightTitle = date + getRole.areaName + '<br>订单流水应收'
      this.listTitle = {title: date + getRole.areaName + '（往返）订单流水', name: '订单号', value: '订单金额 （元）'}
      this.runningWaterObj = {
        allLeftTitle: this.allLeftTitle,
        allRightTitle: this.allRightTitle,
        leftTitle: this.leftTitle,
        rightTitle: this.rightTitle,
        allAmountWater: this.allAmountWater,
        allAmountReceivable: this.allAmountReceivable,
        amountWater: this.amountWater,
        amountReceivable: this.amountReceivable,
        // 昨日总订单流水上期数
        orderPriorPeriod: this.orderPriorPeriod,
        // 昨日总应收上期数
        receivedPriorPeriod: this.receivedPriorPeriod,
        unit: '元'
      }
      // this.$refs.totalDom.changeTitle(runningWaterObj)
      // 订单流水前6名
      let provinceData = getTurnover.resultData.resultIndexListData
      console.log(provinceData)
      this.barTitle = date + getRole.areaName + common.isLine() + '订单流水前列排名'
      let provinceYdata = []
      let payDealData = []
      payDealData = common.maxValue(provinceData, this, 'value', '元')
      if (provinceData && provinceData.length > 0) {
        for (let k = 0; k < 6 && k < provinceData.length; k++) {
          if (provinceData[k].provinceName === 'undefined') {
            break
          } else {
            provinceYdata.push(provinceData[k].name)
          }
        }
      }
      let barXData = payDealData.yaisData.splice(0, 6)
      if (this.userTypeIsSeven) {
        this.$refs.barDom.barData(provinceYdata.reverse(), barXData.reverse(), this.barTitle, payDealData.unit)
      }

      // 支付方式
      let payData = getTurnover.resultData.resultOrderGroupByPayType
      let yData = []
      let dealData = []
      dealData = common.maxValue(payData, this, 'value', '元')
      for (let i in payData) {
        yData.push(payData[i].name)
      }
      this.$refs.payBarDom.barData(yData.reverse(), dealData.yaisData.reverse(), this.payBarDomTitle, dealData.unit)
      // 订单列表
      this.waterListData = provinceData
    }
  }
}
</script>
<style lang="scss" src="../../assets/style/common.scss"></style>
